<template>
    <div class="wrapper-records">
        <div class="wrapper-first">
           <span class="iconfont icon-fanhui" @click= "golasts"></span>
            <h2 class="ALLRecord">兑换记录</h2>
        </div>
        <div class="changerecords">
            <ul class="ranklist">
            <li v-for="(items, index) of msg" :key="index" @click= "goother(items)">
            <!-- <span style="color:#E5E5E5;font-size:.46rem;font-weight:800;margin-left:-4%">{{index +1}}</span> -->
            <img :src="msgs[items.gift_id - 1].thumb" alt="">
            <p>
            <span style="color:rgba(87,87,87,1);font-size:.32rem;font-weight:500;width:1.8rem">{{msgs[items.gift_id - 1].name}}</span>
            <span style="font-size:.28rem;color:rgba(128,128,128,1);">{{items.createtime}}</span>
            </p>
           <p>
            <span></span>
            <span style="font-size:.28rem;color:rgba(255,142,142,1);">-<span>{{msgs[items.gift_id - 1].score}}</span>积分</span>
           </p>
        </li>
      </ul>
        </div>
    </div> 
</template>
<script>
import axios from 'axios'
import { Toast } from 'mint-ui'
export default {
    data () {
        return {
        msg :'',
        uid: localStorage.getItem('user_id'),
        msgs :''
        }
    },
    methods:{
     golasts () {
         this.$router.go(-1)
     }
    },
     created (){
      axios.post('https://shixiaozhang.cn/api/app/courserecord/find_giftuser_list',{
       stu_id:this.uid
        }).then((val) => {
             this.msg = val.data.data;
            if(this.msg.length == '0'){
                Toast({
                   message: '您目前还没有兑换礼品！',
                    position: 'middle',
                    duration: 1000
                })
                this.$router.go(-1)
            }
             axios.post('https://shixiaozhang.cn/api/app/courserecord/find_gift_list',{
              }).then((val) => {
                   this.msgs = val.data.data
                    console.log( this.msgs);
              })
           
           
        }).catch((err) => {
          console.log(err);
        })
        //   axios.post('students/ api/app/courserecord/add_student_vote',{
        // uid:this.uid
        // }).then((val) => {
          
        //   this.msg = val.data.data;
        //    console.log(this.msg);
        // }).catch((err) => {
        //   console.log(err);
        // })
   },
     filters: {
			formatDate:function (date) {
			var d = new Date(date);
			var year = d.getFullYear();
			var month = d.getMonth() + 1;
			var day = d.getDate() <10 ? '0' + d.getDate() : '' + d.getDate();
			return  year+ '-' + month + '-' + day + ' ' ;
			}
		},
   mounted (){
       this.WXConfig.wxShowMenu(); 
   }
    
}
</script>
<style scoped>
.wrapper-records{
    width: 100%;
    height: auto;

}
.wrapper-first{
    width: 100%;
    height: .84rem;
    background: -webkit-linear-gradient(left, #00DFB9, #35B6A8); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #00DFB9, #35B6A8); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #00DFB9, #35B6A8); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #00DFB9, #35B6A8); /* 标准的语法 */

}
.icon-fanhui{
  width:.5rem;
  height: .7rem;
  font-size: .5rem;
  line-height: .7rem;
  float: left;
  color: #fff;
  position:absolute;
  z-index: 999;
   line-height: .84rem
}
.ALLRecord{
  width: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: .35rem;
  color:#fff;
  padding-top: .1rem;
  position: absolute;
  line-height: .64rem
}
.ranklist{
    position: relative;
    padding-top: .2rem;
    width: 100%;
    background: #fff;
    box-shadow: 0px 2px 2px 2px #cecece;
    overflow: hidden;
}
.ranklist > li {
    width: 90%;
    margin-left: 5%;
    height: 1.5rem;
    margin-left: 5%;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-around;
    align-items:center;
    font-size: .24rem;
    color: #000;
    background: #fff
}
.ranklist> li > p {
    height: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
}
.ranklist >li >img{
    width: 1.63rem;
    height:1.15rem;
    margin-left:-7%;
}
</style>


